<template>
  <el-dialog
    title="编辑用户"
    :visible.sync="dialogFormVisible"
    @close="clear"
    ref="dialog"
    width="30%">
    <el-form v-model="form"
             style="text-align: left"
             ref="form"
             :model="form"
             :rules="rules"
             label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"
                  :disabled="true"
                  style="caret-color: black;"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="20">
          <el-form-item label="密码">
            <el-input v-model="form.password" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-button type="primary" @click="resetPass">重置</el-button>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="电话号码" prop="phone">
            <el-input v-model="form.phone"
                      style="caret-color: black;"></el-input>
          </el-form-item>
        </el-col>
        <el-button type="primary" @click="setPhone">重置</el-button>
      </el-row>

      <el-row>
        <el-col :span="20">
          <el-form-item label="邮箱">
            <el-input v-model="form.email" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-button type="primary" @click="resetEmail">重置</el-button>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="权限" prop="authority">
            <el-select v-model="form.authority" >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button type="primary" @click="setAuthority" style="display: inline-block">设置权限</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item prop="id" style="height: 0">
        <el-input type="hidden" v-model="form.id" ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
          <el-button @click="clear">取消</el-button>
        </span>
  </el-dialog>
</template>

<script>
export default {
  name: "EditUser",
  data(){
    var phoneValidate = (rule, value, callback) => {
      if(value==='') callback(new Error('请输入电话号码'))
      var phoneReg = /^((13|14|15|16|17|18|19)\d{9})$/
      if (!phoneReg.test(value))
        callback(new Error('请输入正确的手机号码格式'))
      else
        callback()
    };
    var authorityValidate = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('权限不能为空'))
      }
      callback()
    };
    return{
      dialogFormVisible:false,
      form: {
        id:'',
        username: '',
        password: '',
        phone: '',
        email: '',
        authority:0
      },
      options:[
        {value:0,label:'禁用'},
        {value:1,label:'可查看'},
        {value:2,label:'可编辑'},
        {value:4,label:'管理员'},
      ],
      rules:{
        phone:[{
          validator: phoneValidate, trigger:'blur'
        }],
        authority:[{
          validator: authorityValidate, trigger:'blur'
        }],
      }
    }
  },
  methods:{
    clear () {
      this.form = {
        id:'',
        username: '',
        password: '',
        phone: '',
        email: '',
        authority:0
      }
      this.dialogFormVisible=false
      this.$emit('clear')
    },
    /*
      重置密码
     */
    resetPass(){
      this.$axios.post('/user/update', {
        id: this.form.id,
        password: this.$md5('abc123'),
        phone: this.form.phone,
        email: this.form.email
      }).then(() => {
        this.$message.info('修改成功')
        this.form.password = '******'
        if(this.form.email!==null&&this.form.email!=='')
          this.$axios.post(`/email/notice`,{
            email:this.form.email
          }).then(()=>this.$message.info('已提示')).catch((failRes)=>console.log(failRes))
      }).catch(() => {
        this.$message.error('修改失败')
        return false
      })
    },

    /*
      重置邮箱
     */
    resetEmail(){
      this.$axios.post('/user/update', {
        id: this.form.id,
        password: null,
        phone: this.form.phone,
        email: null,
      }).then(res => {
        this.$message.info('修改成功')
        this.form.email=''
      }).catch(() => {
        this.$message.error('修改失败')
        return false
      })
    },


    /*
      设置电话
     */
    setPhone(){
      this.$axios.post('/user/update', {
        id: this.form.id,
        password: null,
        phone: this.form.phone,
        email: this.form.email,
      }).then(() => {
        this.$message.info('修改成功')
      }).catch(() => {
        this.$message.error('修改失败')
        return false
      })
    },

    /*
      设置权限
     */
    setAuthority(){
      this.$axios.get(`/user/authority/id=${this.form.id}/set=${this.form.authority}`).then(res => {
        this.$message.info('修改成功')
      }).catch(() => {
        this.$message.error('修改失败')
        return false
      })
    }
  }
}
</script>

<style scoped>
/deep/.el-input{
  width: 95%;
}
</style>
